<template>
  <div ref="chart1" class="warningbox"></div>
</template>
<script>
import ResizeChart from "@/components/mixin/ResizeChart";
export default {
  data() {
    return {
      myChart: null,
      option: {
        xAxis: {
          type: "category",
          data: [],

          axisTick: {
            show: false,
          },
          axisLabel: {
            rotate: 30,
            margin: 20,
            interval: 0,
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },

          splitLine: {
            show: false,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
          formatter: function (params) {
           
            // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可
          },
        },
        grid: {
          top: "4%",
          bottom: "3%",
          left: "0%",
          right: "5%",
          containLabel: true,
        },
        series: [
          {
            data: [],
            type: "bar",
            barWidth: 20,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(248,248,255,0.4)",
            },
            label: {
              show: true,
              formatter: function (params) {},
            },

            itemStyle: {
              normal: {
                color: "red",
              },
            },
          },
        ],
      },
    };
  },
  mounted() {

  },
  props: {
    formatter: {
      type: Function,
      default: function (params) {
        if (!params[0].value) {
          params[0].value = 0;
        }
        return params[0].name + "共有" + params[0].value + "个预警村庄";
      },
    },
  },
  mixins: [ResizeChart],
  methods: {
    initEchartMap() {
      this.myChart = this.$echarts.init(this.$refs.chart1);
      window.addEventListener("resize", this.myChart.resize);
      this.myChart.setOption(this.option);
    },
    changeMap(a, b) {
      this.option.xAxis.data = a;
      this.option.series[0].data = b;
      this.myChart.setOption(this.option);
      this.myChart.hideLoading();
    },
  },
};
</script>
<style lang="scss" scoped>
.warningbox {
  margin: 10px;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  position: relative;
}
</style>